import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Platform, Dimensions, Image, TouchableOpacity, Modal, RefreshControl } from 'react-native';
import { Popover, Icon, Button, Flex, Carousel, Toast, Grid } from 'antd-mobile-rn';
import constants from '../../../utils/constants';
import NavSelection from '../../../components/navSelection';
import api from '../../../utils/api';
import showSubjectImages from '../../../components/showSubjectImages';

const window = Dimensions.get("screen");

const styles = StyleSheet.create({
    contextStyle: {
        margin: 50,
        flex: 1,
    },
    menuContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        height: 400,
        paddingHorizontal: 5,
        paddingVertical: 10,
    },
    triggerStyle: {
        flexDirection: 'row',
        paddingHorizontal: 10,
    },
    overlayStyle: {
        left: 90,
        marginTop: 20,

    },
    // 在 iOS 上弹出层有阴影，Android 上没有，
    // 详细：http://facebook.github.io/react-native/releases/0.39/docs/shadow-props.html#shadowcolor
    androidOverlayStyle: {
        borderWidth: 1,
        borderColor: '#ccc',
    },
});

export default class Record extends Component {

    static navigationOptions = (e) => {
        return {
            title: "错题记录",

        }
    }

    state = {
        accuracy: "none",
        tm: "none",
        type: "none",
        selectedItemIndex: 0,
        selectedItems: [
            null, null, null, null
        ],
        list: [],
        hasData: true,
        contentHeight: 0

    }

    loadData = () => {

        const items = this.state.selectedItems;
        const params = {
            ieltsId: items[2] ? items[2].value : undefined,
            order: items[1] ? items[1].value : undefined,
            section: items[3] ? items[3].value : undefined
        }

        api({
            url: "/examRecord/getList",
            method: "POST",
            body: params
        }).then(data => {
            const list = data.result;

            const pageNum = parseInt((list.length + 4 - 1) / 4);
            console.log("pageNo,", pageNum);
            const dataList = [];
            for (let i = 1; i <= pageNum; i++) {
                const arr = [];
                const startIndex = (i - 1) * 4;
                list.forEach((item, index) => {
                    if (index >= startIndex && arr.length < 4) {
                        arr.push(item);
                    }

                })

                dataList.push(arr);

            }

            console.log("arr", dataList);

            this.setState({
                list: dataList,
                hasData: dataList.length == 0
            });
        })
    }


    componentDidMount() {



        //Toast.info(this.refs.wrongMain.nativeEvent.layout.height);

       

        //加载数据
        api({
            url: "/card/getIeltsAndExamSets"
        }).then(data => {
            if (data.success) {
                const { examSetsMap, ieltMap } = data.result;
                this.setState({
                    examSets: Object.keys(ieltMap).map(key => {
                        return {
                            value: key,
                            label: ieltMap[key]
                        }
                    }),
                    ielts: Object.keys(ieltMap).map(key => {
                        return {
                            value: key,
                            label: ieltMap[key]
                        }
                    }),
                });




            }
        })

        this.loadData();
    }


    onItemImageClick = (item) => {
        showSubjectImages(item);
    }

    render() {

        const { appNavigation } = this.props.screenProps;

        console.log("appNavigation:sss ",this.props.screenProps);

        const MainHeight = appNavigation.getParam("wrongMainHeight",1);

        const sHeight = (MainHeight-150)/2;

        const items = [
            { name: "默认" },
            {
                name: "正确率", data: [
                    { label: "高到低", value: "0" },
                    { label: "低到高", value: "1" },
                ]
            },
            {
                name: "剑桥", data: this.state.examSets,
            },
            {
                name: "单项", data: [
                    { label: "听力", value: "1" },
                    { label: "阅读", value: "2" }
                ]
            }
        ];

        const renderItem = (item, index) => {
            if (item.images.length > 1) {
                return (
                    (
                        <View key={index} style={{ width: 150, height: sHeight, position: "relative", alignItems: "center", backgroundColor: "#ccc", marginLeft: (window.width-308)/3,marginBottom:15 }}>

                            <View style={{ width: 150, height: sHeight, borderColor: "#ddd", borderWidth: 2, position: "absolute", backgroundColor: "#fff", }}>

                            </View>
                            <View style={{ width: 150, height: sHeight, borderColor: "#ddd", borderWidth: 2, position: "absolute", backgroundColor: "#fff", right: 5, bottom: 5 }}>
                                <View style={{ alignItems: "center", marginBottom: 5 }}>
                                    <Text style={{ marginTop: 5, marginBottom: 5 }}>{item.cardTitle}</Text>
                                    <View style={{ width: 50, height: 2, backgroundColor: constants.themeColor }}></View>

                                </View>
                                <View style={{ alignItems: "center" }}>
                                    <TouchableOpacity onPress={() => {
                                        this.onItemImageClick(item);
                                    }}>
                                        <Image resizeMode={"center"} style={{ width: 130, height: sHeight-50 }} source={{ uri: item.images[0] }}></Image>
                                    </TouchableOpacity>
                                </View>
                            </View>

                        </View>
                    )
                )
            }
            return (
                <View key={index} style={{ width: 150, height: sHeight, position: "relative", alignItems: "center", backgroundColor: "#ccc", marginLeft: (window.width-308)/3,marginBottom:15 }}>

                    <View style={{ width: 150, height: sHeight, borderColor: "#ddd", borderWidth: 2, position: "absolute", backgroundColor: "#fff", }}>
                        <View style={{ alignItems: "center", marginBottom: 5 }}>
                            <Text style={{ marginTop: 5, marginBottom: 5 }}>{item.cardTitle}</Text>
                            <View style={{ width: 50, height: 2, backgroundColor: constants.themeColor }}></View>

                        </View>
                        <View style={{ alignItems: "center" }}>
                            <TouchableOpacity onPress={() => {
                                this.onItemImageClick(item);
                            }}>
                                <Image resizeMode={"center"} style={{ width: 130, height: sHeight-50 }} source={{ uri: item.images[0] }}></Image>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )
        }

        const showNoData = this.state.hasData ? (
            <View style={{ alignItems: "center", padding: 20 }}>
                <Text style={{ color: "#ccc" }}>没有数据...</Text>
            </View>
        ) : undefined;

        return (
            <View style={{ flex: 1 }}>
                <NavSelection
                    selectedItems={this.state.selectedItems}
                    selectedIndex={this.state.selectedItemIndex}
                    items={items}
                    onNavLabelClick={(item, index) => {
                        if (item.name === '默认') {
                            this.setState({
                                selectedItems: [null, null, null, null]
                            });
                            setTimeout(this.loadData, 1);
                            this.loadData();
                        }

                        this.setState({
                            selectedItemIndex: index
                        })
                    }}
                    onItemClick={(item) => {
                        if (!item.value) {


                            return;
                        }
                        const items = this.state.selectedItems;
                        items[this.state.selectedItemIndex] = item;
                        this.setState({
                            selectedItems: items
                        });

                        this.loadData();
                    }}
                >
                    <View style={{ flex: 1, backgroundColor: "#fff", paddingTop: 5 }}>
                        <View >
                            {showNoData}
                            <ScrollView

                                refreshControl={
                                    <RefreshControl
                                        colors={[constants.themeColor]}
                                        refreshing={this.state.refreshing}
                                        onRefresh={() => {
                                            this.setState({
                                                refreshing: true
                                            })
                                            this.loadData();
                                            setTimeout(() => {
                                                this.setState({
                                                    refreshing: false
                                                });
                                            }, 1500)
                                        }}
                                        progressBackgroundColor="#fff"

                                    />
                                }

                            >
                                <View style={{ flex: 1, backgroundColor: "#fff"}}>

                                    
                                    <Carousel style={{height:MainHeight > 0? MainHeight - 120:0}}>

                                        {
                                            this.state.list.map((pageItems, index) => {
                                                return (
                                                    <View key={index} style={{ flex: 1, width: window.width}}>

                                                        <View style={{ alignItems: "center", flexDirection: "row", flexWrap: 'wrap', width: "100%",padding:5 }}>
                                                            {
                                                                pageItems.map((item, index) => {

                                                                    return renderItem(item, index);
                                                                })
                                                            }

                                                        </View>

                                                    </View>
                                                )

                                            })
                                        }

                                    </Carousel>


                                </View>
                            </ScrollView>
                        </View>
                        <View style={{ alignItems: "center", position: "absolute", width: "100%", bottom: Platform.OS === 'android' ? 40 : 45 }}>
                            <Button
                                onClick={() => {
                                    appNavigation.navigate("SubjectAdd", {
                                        wrongRecordBack: () => {
                                            this.loadData();
                                        }
                                    })
                                }}
                                type={"primary"}
                                activeStyle={{ backgroundColor: constants.themeColor, borderColor: constants.themeColor }}
                                style={{ width: 150, borderRadius: 25, backgroundColor: constants.themeColor, borderColor: constants.themeColor }}
                            >
                                <Text style={{ fontSize: 16 }}>点我对答案 + </Text>
                            </Button>
                        </View>
                    </View>
                </NavSelection>

            </View>

        )
    }
}
